<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>迷笛考级</title>
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/midi-mobile/css/initialize.css"/>
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/midi-mobile/css/public.css"/>
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/midi-mobile/css/swiper.min.css"/>
		<script src="__PUBLIC__/midi-mobile/js/jquery-2.2.3.js"></script>
		<script src="__PUBLIC__/midi-mobile/js/public.js"></script>
		<script src="__PUBLIC__/midi-mobile/js/swiper.min.js"></script>
	</head>
	<body>
		<!--导航栏-->
		<header>
			<div class="header-inner">
				<div class="header-logo">
					<a><img src="__PUBLIC__/midi-mobile/img/logo_btn@2x.png"/></a>
				</div>
				<div class="header-nav">
					<a><img src="__PUBLIC__/midi-mobile/img/more_btn@2x.png"/></a>
				</div>
				<ul>
						<!-- <li><a>登录</a>/<a>注册</a></li> -->
						<li><a class="active">迷笛音频</a></li>
						<li><a>新闻动态</a></li>
						<li><a>客户端</a></li>
					<!-- 	<li><a>曲谱教程</a></li>
						<li><a>迷笛先生</a></li>
						<li><a>MIDICLUB</a></li>
						<li><a>关于我们</a></li> -->
						<li><a>退出</a></li>
					</ul>
			</div>
		</header>
		<!--轮播图-->
		<section>
			<div class="section-inner">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<a><img src="__PUBLIC__/midi-mobile/img/banner@2x.png"/></a>
						</div>
						<div class="swiper-slide">
							<a><img src="__PUBLIC__/midi-mobile/img/banner-4@2x.png"/></a>
						</div>
						<div class="swiper-slide">
							<a><img src="__PUBLIC__/midi-mobile/img/banner-2@2x.png"/></a>
						</div>
					</div>
					<div class="swiper-pagination"></div>
				</div>
			</div>
		</section>
		<div class="banner">
		    <img src="__PUBLIC__/midi-mobile/img/考级认证机构@2x.png" />
		</div>
		<div class="title">
		    <i></i>
		    <span>迷笛编委团队</span>
		</div>
		<!--迷笛编委团队-->
		<div class="bianwei">
		    <div class="bianwei-inner">
		       <div class="swiper-container">
		           <div class="swiper-wrapper">
		             <div class="swiper-slide">
		                <a><img src="__PUBLIC__/midi-mobile/img/Eduardo Teodoro.jpg"/></a>
		             </div>
		             <div class="swiper-slide">
		                <a><img src="__PUBLIC__/midi-mobile/img/Eduardo Teodoro.jpg"/></a>
		             </div>
		             <div class="swiper-slide">
		                <a><img src="__PUBLIC__/midi-mobile/img/Eduardo Teodoro.jpg"/></a>
		             </div>
		             <div class="swiper-slide">
		                <a><img src="__PUBLIC__/midi-mobile/img/Eduardo Teodoro.jpg"/></a>
		             </div>
		             <div class="swiper-slide">
		                <a><img src="__PUBLIC__/midi-mobile/img/Eduardo Teodoro.jpg"/></a>
		             </div>
		             <div class="swiper-slide">
		                <a><img src="__PUBLIC__/midi-mobile/img/Eduardo Teodoro.jpg"/></a>
		             </div>
		             <div class="swiper-slide">
		                <a><img src="__PUBLIC__/midi-mobile/img/Eduardo Teodoro.jpg"/></a>
		             </div>
		             <div class="swiper-slide">
		                <a><img src="__PUBLIC__/midi-mobile/img/Eduardo Teodoro.jpg"/></a>
		             </div>
		             <div class="swiper-slide">
		                <a><img src="__PUBLIC__/midi-mobile/img/Eduardo Teodoro.jpg"/></a>
		             </div>
		             <div class="swiper-slide">
		                <a><img src="__PUBLIC__/midi-mobile/img/Eduardo Teodoro.jpg"/></a>
		             </div>
		           </div>

		       </div>
		       <div class="prev"><a><img src="__PUBLIC__/midi-mobile/img/next_non@2x.png"/></a></div>
		       <div class="next"><a><img src="__PUBLIC__/midi-mobile/img/next_btn@2x.png"/></a></div>
		    </div>
		</div>
		<div class="title">
		    <i></i>
		    <span>迷笛品牌</span>
		</div>
		<div class="banner">
		  <img src="__PUBLIC__/midi-mobile/img/迷笛品牌@2x.png" />
		</div>
		<div class="title">
		    <i></i>
		    <span>联系迷笛</span>
		</div>
		<div class="banner">
		   <img src="__PUBLIC__/midi-mobile/img/Group 3@2x.png" />
		</div>
		<script >
			var myswiper = new Swiper(".section-inner .swiper-container",{
				autoplay:{
					stopOnlastSlide:true,
				},
				loop:true,
				pagination:{
					el:'.swiper-pagination',
				}
	        });

           var swiper = new Swiper('.bianwei .swiper-container', {
               slidesPerView: 4,
               slidesPerColumn: 2,
               spaceBetween: 10,
               navigation:{
               	nextEl:'.next',
               	prevEl:'.prev',
               }
            });

		</script>
	</body>
</html>
